<template>
  <div>
    <Button @click="dialogVisible = true">打开</Button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="80%">
      <el-table
        :data="lastUseAcctList"
        stripe
        border
        height="40vh"
        style="width: 100%"
      >
        <el-table-column prop="acctGrade" label="分类分级" width="300">
          <template slot-scope="scope">
            <el-select v-model="scope.row.acctGrade" placeholder="请选择">
              <el-option
                v-for="item in form.levelList"
                :key="item.CODE"
                :label="item.TEXT"
                :value="item.CODE"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="acctLimitNum" label="限额" width="300">
          <template slot-scope="scope">
            <el-input v-model="scope.row.acctLimitNum" type="number"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lastUseAcctList: [
        { acctGrade: null, acctLimitNum: 0 },
        { acctGrade: null, acctLimitNum: 0 },
        { acctGrade: null, acctLimitNum: 0 },
        { acctGrade: null, acctLimitNum: 0 },
        { acctGrade: null, acctLimitNum: 0 },
      ],
      form: {
        levelList: [],
      },
      dialogVisible: false,
    };
  },
  created() {
    setTimeout(() => {
      this.form.levelList = [
        { CODE: 1, TEXT: "小白", value: 20 },
        { CODE: 2, TEXT: "小黑", value: 30 },
        { CODE: 3, TEXT: "小棕", value: 50 },
      ];
    }, 2000);
  },
  methods: {
    handleChange(value, row) {
      // 在这里使用 this.$set 将属性设置为响应式的
      // 第一个参数是要设置的对象，第二个参数是要设置的属性名，第三个参数是要设置的属性值
      this.$set(row, "acctGrade", value);
    },
  },
};
</script>
